import React, {Component, createRef} from 'react';

class Header extends Component {

    // 输入框ref
    inputRef = createRef()

    render() {
        return (
            <div className="todo-header">
                <input
                    ref={this.inputRef}
                    onKeyUp={this.handleKeyUp}
                    type="text"
                    placeholder="请输入任务，回车后添加"
                />
            </div>
        );
    }

    // 监控输入框键盘事件
    handleKeyUp = (event) => {
        if (event.key && event.key === "Enter") {
            // 传递数据给父组件
            const input = event.target.value
            if (input) {
                this.props.onAppendTask(input)
                // 清空输入
                this.inputRef.current.value = ''
            }
        }
    }
}

export default Header;
